// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  property var disable_cards: []
  property var ok_options: []
  property var result: []
  property var selected_ids: []
  // property var options: []
  property var all_options: []
  property var all_cards: []
  property var selrange: []
  property string skill_name: ""
  property string detail_content: ""

  id: root
  title.text: luatr("$Choice").arg(luatr(skill_name))
  width: 550
  height: title.height + (all_options.length > 0 ? body.height : 0) + (all_cards.length > 0 ? cardsContainer.height : 0) + 100

  Component {
    id: cardDelegate
    CardItem {
      scale: 0.72
      Component.onCompleted: {
        setData(modelData);
      }
      autoBack: false
      showDetail: true
      selectable: !disable_cards.includes(cid)
      onSelectedChanged: {
        if (selected) {
          chosenInBox = true;
          root.selected_ids.push(cid);
        } else {
          chosenInBox = false;
          root.selected_ids.splice(root.selected_ids.indexOf(cid), 1);
        }
        root.selected_ids = root.selected_ids;
      }
    }
  }

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 75
    width: parent.width - 10
    height: talkcontent.height
    clip: true
    Text {
      id: talkcontent
      width: parent.width
      // height: parent.height
      text: detail_content
      color: "white"
      wrapMode: Text.WordWrap
      font.pixelSize: 16
      textFormat: TextEdit.RichText
    }
  }

  ListView {
    id: body
    visible: all_options.length > 0 ? true : false
    anchors.top: decontent.bottom
    anchors.topMargin: 15
    anchors.left: decontent.left
    anchors.leftMargin: 15
    width: Math.min(500, 100 * model.length + model.length * 5)
    height: 160
    orientation: ListView.Horizontal
    clip: true
    spacing: 5

    model: all_options

    delegate: Item {
      width: 100
      height: 150

      MetroToggleButton {
        id: choicetitle
        width: parent.width
        text: luatr(modelData)
        triggered: root.result.includes(index)
        enabled: all_options.indexOf(modelData) !== -1
                 && (root.result.length < root.selrange[0] || triggered)
        textFont.pixelSize: 18
        anchors.top: choiceDetail.bottom
        anchors.topMargin: 8

        onClicked: {
          if (triggered) {
            root.result.push(index);
          } else {
            root.result.splice(root.result.indexOf(index), 1);
          }
          root.result = root.result;
        }
      }

      Flickable {
        id: choiceDetail
        x: 4
        height: parent.height - choicetitle.height
        contentHeight: detail.height
        width: parent.width
        clip: true
        Text {
          id: detail
          width: parent.width
          text: luatr(":" + modelData)
          color: "white"
          wrapMode: Text.WordWrap
          font.pixelSize: 15
          textFormat: TextEdit.RichText
        }
      }
    }
  }

  Flickable {
    id: cardsContainer
    visible: all_cards.length > 0 ? true : false
    flickableDirection: Flickable.AutoFlickIfNeeded
    width: 500
    height: Math.min(cardsList.height,300)
    // anchors.fill: parent
    anchors.top:body.visible ? body.bottom : decontent.bottom
    // anchors.topMargin: 1
    anchors.left:decontent.left
    anchors.leftMargin: 10

    contentWidth: cardsList.width
    contentHeight: cardsList.height + 20
    clip: true

    GridLayout {
      id: cardsList
      columns: 5
      columnSpacing: -10
      rowSpacing: -10
      anchors.top: parent.top
      Repeater {
        id: to_select
        model: all_cards
        delegate: cardDelegate
      }
    }
  }

  Item {
    id: buttonArea
    anchors.bottom:root.bottom
    anchors.bottomMargin: 5
    anchors.left:decontent.left
    anchors.leftMargin: root.width / 2 - 40
    height: 40

    Row {
      anchors.verticalCenter: parent.verticalCenter
      anchors.bottom: parent.bottom
      spacing: 8

      Repeater {
        model: ok_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: root.selected_ids.length == root.selrange[1] && root.result.length == root.selrange[0]

          onClicked: {
            close();
            roomScene.state = "notactive";
            let choices = [];
            if (root.result.length > 0) {
              root.result.forEach(id => {
                choices.push(all_options[id]);
              });
            }
            const reply = JSON.stringify(
              {
                cards: root.selected_ids,
                choices: choices,
              }
            );
            ClientInstance.replyToServer("", reply);
          }
        }
      }
    }
  }

  function loadData(data) {
    // console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    all_options = data[2] ?? [];
    all_cards = data[3] ? data[3].map(cid => {
      if (typeof cid === 'object') {
        return cid;
      }
      return lcall("GetCardData", cid);
    }) : []; 
    selrange = data[4]
    ok_options = data[5]
  }
}
